<!-- 
  Cascader 级联选择组件                 zls-2022/06/02
    所有属性、事件、方法、插槽，请参考  https://vant-contrib.gitee.io/vant/#/zh-CN/cascader
 -->
<template>
  <Field
    class="z-input"
    v-model="data"
    :name="$attrs['name']"
    :label="$attrs['label']"
    :required="$attrs['required']"
    :rules="$attrs['required'] || $attrs['required'] === '' ? [{ required: true, message: '请选择' }] : []"
    :placeholder="$attrs['placeholder'] || '请选择'"
    :disabled="$attrs['disabled']"
    :readonly="$attrs['readonly'] || true"
    :border="$attrs['border']"
    :colon="$attrs['colon']"
    :clickable="$attrs['clickable']"
    :is-link="$attrs['is-link'] || true"
    :label-width="$attrs['label-width']"
    :autocomplete="$attrs['autocomplete']"
    @click="show = true"
  >
    <template #left-icon>
      <slot name="left-icon"></slot>
    </template>
    <template #right-icon>
      <z-svg name="chahao" v-if="data" @click.stop="clear"></z-svg>
    </template>
    <template #button>
      <slot name="button"></slot>
    </template>
    <template #extra>
      <slot name="extra"></slot>
    </template>
  </Field>

  <Popup
    v-model:show="show"
    :overlay="$attrs['overlay']"
    :position="$attrs['position'] || 'bottom'"
    :lock-scroll="$attrs['lock-scroll']"
    :close-on-click-overlay="$attrs['close-on-click-overlay']"
    :closeable="$attrs['closeable']"
    :close-icon="$attrs['close-icon']"
    :close-icon-position="$attrs['close-icon-position']"
    :safe-area-inset-bottom="true"
    round
    close-on-popstate
    @click-overlay="show = false"
    @click-close-icon="show = false"
  >
    <Cascader
      v-model="code"
      :title="$attrs['title']"
      :options="$attrs['options']"
      :placeholder="$attrs['placeholder']"
      :active-color="$attrs['active-color']"
      :swipeable="$attrs['swipeable']"
      :field-names="$attrs['field-names']"
      @finish="finish"
      @close="show = false"
    />
  </Popup>
</template>

<script>
export default { name: 'z-cascader' }
</script>
<script setup>
import { ref, watch } from 'vue'
import { Field, Popup, Cascader } from 'vant'
const emit = defineEmits(['update:modelValue', 'clear', 'finish'])
const props = defineProps({
  // 格式必须为{ text: '', code: null }
  modelValue: {
    type: Object,
    default: () => ({})
  }
})

const data = ref('')
const show = ref(false) // 是否显示弹框
const code = ref(null) // 选中值

// 实时更新数据
watch(
  () => props.modelValue,
  newVal => {
    data.value = newVal.text
    if (newVal?.code?.length) {
      code.value = newVal.code[newVal.code.length - 1]
    }
  },
  { immediate: true, deep: true }
)

// 清空
function clear() {
  emit('update:modelValue', { text: '', code: null })
  emit('clear', { text: '', code: null })
}

// 选中某一项后，点击确认按钮 { value: 前选中的时间 }
function finish({ value, selectedOptions, tabIndex }) {
  show.value = false
  let codeArr = [],
    textStr = ''
  selectedOptions.forEach(v => {
    textStr += `${v.text},`
    codeArr.push(v.value)
  })
  textStr = textStr.slice(0, -1)
  emit('update:modelValue', { text: textStr, code: codeArr })
  emit('finish', { text: textStr, code: codeArr })
}
</script>
